<template>

    <el-header>
      <el-row>
<!--        下面的位置放avatar-->
        <el-col :span="2">
          <el-image :src="require('@/assets/icons/avator.png')" class="avator" v-show="user.name"></el-image>
        </el-col>

<!--        下面的位置放用户信息-->
        <el-col
            :span="6"
            >
          <h2 v-show="user.name">{{user.name}}&nbsp;{{user.class}}</h2>
        </el-col>

        <el-col :span="2"></el-col>

<!--        下面放LOGO-->
        <el-col
            :span="4"
        >
          <el-image
              :src="logo_path"
              style="height: 80px"
          ></el-image>
        </el-col>

<!--        占位符-->
        <el-col :span="6"></el-col>

<!--        下面放登录按钮-->
        <el-col :span="4">
          <el-button type="success"  color="#3bcdaf" class="logout" @click="logout()" v-show="user.name">退出登录</el-button>
        </el-col>

      </el-row>
    </el-header>

</template>

<script>
import {computed, defineComponent} from 'vue'
import {onMounted, ref} from "vue";
import axios from "axios";
import store from "@/store";

export default defineComponent({
  name: "the-header",
  setup() {

      const user = ref({class:"高三（一）班"});// 正常情况应该给个空对象 TODO：这里是prod环境下需要修改的地方

    // const user = computed(() => store.state.user);

    const logo_path = ref();
    /**
     * login 接口，判断用户是否登录
     */
    const login = () => {
      axios.post("/login").then((response)=>{
        const data = response;
        if(data.success){
          store.commit("setUser",data.content);
        }
      })
    }

    /**
     * logout 接口，用户进行登出操作,通过token来进行的
     */
    const logout = () =>{
      console.log("用户登出了");
      axios.get('/user/logout/'+user.value.token).then((response)=>{
        const data = response.data;
        if(data.success){
          console.log.success("退出登录成功");
          store.commit("setUser",{});
        }else{
          console.log("退出登录失败");
        }
      })
    }

    onMounted(() => {
      logo_path.value = require('@/assets/img/fape-logo.jpg');
    });


    return {
      logo_path,
      user,
      logout,
    }
  }
});
</script>

<style scoped>

.el-header {
  width: 1024px;
  height: 80px !important;
  background: #FFF;
}

.avator {
  height: 80px!important;
  margin-left: 1px;
}

.logout {
  text-align: right !important;
  width: 100px;
  height: 50px;
  margin-top: 16px;
  margin-right: 0px!important;
}

h2 {
  margin-top: 25px!important;
}

</style>